<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard-editor-container {
    padding: 18px 22px 22px 22px;
    background-color: rgb(240, 242, 245);
    margin-bottom: 80px;
    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }
  .form-operator-button {
    background-color: #fff;
    position: fixed;
    width: 100%;
    left: 0px;
    right: 0;
    bottom: 33px;
    height: 64px;
    line-height: 64px;
    text-align: right;
    box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.05);
    z-index: 10;
  }
  .form-el-radion {
    line-height: 30px;
    padding: 5px 0px;
    width: 100%;
  }
  .hex-form-inf {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    cursor: pointer;
    margin-right: 40px;
    position: relative;
    min-height: 33px;
    margin-left: 60px;
    line-height: 33px;
    color:#347DE1
  }
  .hex-form-inf-content {
    font-size: 14px;
    font-weight: 500;
    display: none;
  }
  .hex-form-inf-icon {
    font-size: 20px;
    margin-top: 5px;
    position: absolute;
    right: 0px;
  }
  .el-card__header_task {
    padding: 18px 20px;
    border-bottom: 1px solid #f5f1eb;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: rgb(238, 241, 246);
    background: #eef1f6;
    font-size: 12px;
    font-weight: bold;
  }
  .hex-form-inf .hex-form-inf-content-show{
    padding: 0 4%;
    background-color: #F7F9FA;
    border: 1px solid #347DE1;
    border-radius: 8px;
  }
</style>
<template>
  <div>
    <el-card class="box-card" v-if="showDetail == true">
      <div slot="header" class="clearfix">
        <div class="el-page-header">
          <div class="el-page-header__left" @click="goMainBack">
            <i class="el-icon-back"></i>
            <div class="el-page-header__title">返回</div>
          </div>
          <div class="el-page-header__content" style="font-size: 14px;">周期作业详情</div>
        </div>
      </div>
      <div>
        <el-tabs v-model="activeName">
          <el-tab-pane label="任务列表" name="first">
            <el-table
              border
              stripe
              ref="table"
              :data="taskList"
              row-key="id"
              :header-cell-style="{
                    background: '#eef1f6',
                    color: '#606266'
                  }"
              @filter-change="handleFilterChange"
            >
              <el-table-column
                prop="taskCode"
                :show-overflow-tooltip="true"
                label="任务编码"
                min-width="140"
              />
              <el-table-column
                prop="taskName"
                :show-overflow-tooltip="true"
                label="任务名称"
                min-width="140"
              />
              <el-table-column
                prop="shellPath"
                :show-overflow-tooltip="true"
                label="shell命令"
                min-width="140"
              />
              <el-table-column
                prop="resNum"
                :show-overflow-tooltip="true"
                label="资源数"
                min-width="100"
              />
              <el-table-column
                prop="allowErrCount"
                :show-overflow-tooltip="true"
                label="允许出错次数"
                min-width="100"
              />
              <el-table-column
                prop="isOrder"
                label="是否顺序执行"
                min-width="140" key="isOrder"
                :filters="isOrderStatusDict"
                filter-placement="bottom-end"
                :filter-multiple="false"
                column-key="isOrder"
              >
                <template slot-scope="scope">
                    <el-tag size="small" :type="isOrderStatusFormatterType(scope.row.isOrder)" style="width:60px;">
                        {{isOrderStatusFormatter(scope.row.isOrder)}}
                    </el-tag>
                </template>
              </el-table-column>

              <!--<el-table-column
                prop="isEndTask"
                label="是否结束任务"
                min-width="140"
                :filters="isEndTaskStatusDict"
                filter-placement="bottom-end"
                :filter-multiple="false"
                column-key="isEndTask"
              >
                <template slot-scope="scope">
                    <el-tag size="small" :type="isEndTaskStatusFormatterType(scope.row.isEndTask)" style="width:60px;">
                        {{isEndTaskStatusFormatter(scope.row.isEndTask)}}
                    </el-tag>
                </template>
              </el-table-column>-->
              <el-table-column
                prop="taskStatus"
                label="状态"
                min-width="140" key="taskStatus"
                :formatter="taskStatusFormatter"
                :filters="cycletaskStatusDict"
                filter-placement="bottom-end"
                :filter-multiple="false"
                column-key="taskStatus"
              >
                <template slot-scope="scope">
                    <el-tag size="small" :type="cycletaskStatusFormatterType(scope.row.taskStatus)" style="width:60px;">
                        {{cycletaskStatusFormatter(scope.row.taskStatus)}}
                    </el-tag>
                </template>
              </el-table-column>
              <el-table-column
                prop="execStTs"
                :show-overflow-tooltip="true"
                label="开始时间"
                min-width="140"
              />
              <el-table-column
                prop="execEndTs"
                :show-overflow-tooltip="true"
                label="完成时间"
                min-width="140"
              />
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="作业详情" name="second">
            <el-form
                    ref="form"
                    :model="jobDetailInfo"
                    label-position="left"
                    label-width="160px"
            >
              <el-col
                      :span="24"
                      style="padding: 30px;"
              >
                <div>
                  <el-row>
                    <el-col :span="15">
                      <el-form-item label="业务日期">
                        <el-input v-model="jobDetailInfo.bizDate" disabled />
                      </el-form-item>
                    </el-col>
                    <el-col :span="9" class="data_from_el-col">
                      <div class="hex-form-inf">
                        <div class="hex-form-inf-content">
                          作业执行的业务日期
                        </div>
                        <i
                                class="el-icon-info hex-form-inf-icon"
                                @click="onOperInf($event)"
                                data-status="off"
                        ></i>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="15">
                      <el-form-item label="作业编号">
                        <el-input v-model="jobDetailInfo.jobCode" disabled />
                      </el-form-item>
                    </el-col>
                    <el-col :span="9" class="data_from_el-col">
                      <div class="hex-form-inf">
                        <div class="hex-form-inf-content">
                          唯一编码，周期作业编码
                        </div>
                        <i
                                class="el-icon-info hex-form-inf-icon"
                                @click="onOperInf($event)"
                                data-status="off"
                        ></i>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="15">
                      <el-form-item label="作业名称">
                        <el-input v-model="jobDetailInfo.jobName" disabled />
                      </el-form-item>
                    </el-col>
                    <el-col :span="9" class="data_from_el-col">
                      <div class="hex-form-inf">
                        <div class="hex-form-inf-content">
                          周期作业名称
                        </div>
                        <i
                                class="el-icon-info hex-form-inf-icon"
                                @click="onOperInf($event)"
                                data-status="off"
                        ></i>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="15">
                      <el-form-item label="作业状态">
                        <el-input v-model="jobDetailInfo.jobStatus" disabled />
                      </el-form-item>
                    </el-col>
                    <el-col :span="9" class="data_from_el-col">
                      <div class="hex-form-inf">
                        <div class="hex-form-inf-content">
                          作业完成状态
                        </div>
                        <i
                                class="el-icon-info hex-form-inf-icon"
                                @click="onOperInf($event)"
                                data-status="off"
                        ></i>
                      </div>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="15">
                      <el-form-item label="开始时间">
                        <el-input v-model="jobDetailInfo.jobStTs" disabled />
                      </el-form-item>
                    </el-col>
                    <el-col :span="9" class="data_from_el-col">
                      <div class="hex-form-inf">
                        <div class="hex-form-inf-content">
                          作业开始执行的时间
                        </div>
                        <i
                                class="el-icon-info hex-form-inf-icon"
                                @click="onOperInf($event)"
                                data-status="off"
                        ></i>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="15">
                      <el-form-item label="结束时间">
                        <el-input v-model="jobDetailInfo.jobEndTs" disabled />
                      </el-form-item>
                    </el-col>
                    <el-col :span="9" class="data_from_el-col">
                      <div class="hex-form-inf">
                        <div class="hex-form-inf-content">
                          作业执行结束的时间
                        </div>
                        <i
                                class="el-icon-info hex-form-inf-icon"
                                @click="onOperInf($event)"
                                data-status="off"
                        ></i>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-col>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="任务依赖图" name="third">
            <taskDepend :jobCode="jobInf.jobCode" :bizDate="jobInf.bizDate" :type="type" ref="taskDepend" />
          </el-tab-pane>
          <el-tab-pane label="任务执行统计" name="four">
            <cyclejobDefEchars :jobCode="this.jobCode" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script>
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import taskApi from "@/api/cycleJob/task";
  import job from "@/api/cycleJob/job";
  import Dict from "../../../system/dict";
  import taskDepend from "../../components/taskDepend";
  import cyclejobDefEchars from '../../components/cyclejobDefEchars'


  export default {
    name: "Task",
    components: { Dict, taskDepend, cyclejobDefEchars },
    props: {
      goBack: {
        type: Function,
        default: null
      },
      jobCode:{
        type:String,
        default:'',
      }
    },
    dicts: ["is_order","task_status", "task_is_end", "job_def_status","cycle_job_status"],
    data() {
      return {
        type: "example",
        activeName: "first",
        jobDetailInfo: {},
        showDetail: false,
        jobInf: {},
        taskList:[],
        cycletaskDict:[],
        cycletaskStatusDict:[],
        isOrderDict:[],
        isOrderStatusDict:[],
        isEndTaskDict:[],
        isEndTaskStatusDict:[]
      };
    },
    created() {
      this.cycletaskDict=this.dict.task_status;
      this.isOrderDict=this.dict.is_order;
      this.isEndTaskDict=this.dict.task_is_end;
    },
    watch:{
      cycletaskDict(){
        this.$nextTick(()=>{
          this.cycletaskDict.forEach(item=>{
            var obj={
              text:item.label,
              value:item.value
            }
            this.cycletaskStatusDict.push(obj)
          })
        })
      },

      isOrderDict(){
        this.$nextTick(()=>{
          this.isOrderDict.forEach(item=>{
            var obj={
              text:item.label,
              value:item.value
            }
            this.isOrderStatusDict.push(obj)
          })
        })
      },

      isEndTaskDict(){
        this.$nextTick(()=>{
          this.isEndTaskDict.forEach(item=>{
            var obj={
              text:item.label,
              value:item.value
            }
            this.isEndTaskStatusDict.push(obj)
          })
        })
      },
    },
    methods: {
      initQry(jobInf) {
        this.showDetail = true;
        this.jobInf = jobInf;
        this.getJobDetail(this.jobInf.pkId);
        this.getTaskList();
      },
      taskStatusFormatter(row, column) {
        alert(row.taskStatus);
        return this.dict.label.task_status[row.jobStatus];
      },
      cycletaskStatusFormatter(val){
        return this.dict.label.task_status[val]
      },
      cycletaskStatusFormatterType(val){
        const type = ['','info','primary','','success','danger','warning']
        return type[val]
      },
      isOrderStatusFormatterType(val){
        const type = ['primary','success','info','warning','danger']
        return type[val]
      },
      isOrderStatusFormatter(val){
        return this.dict.label.is_order[val]
      },
      isEndTaskStatusFormatterType(val){
        const type = ['primary','success','info','warning','danger']
        return type[val]
      },
      isEndTaskStatusFormatter(val){
        return this.dict.label.task_is_end[val]
      },
      statusFormatter(row, column) {
        return this.dict.label.task_status[row.taskStatus];
      },
      orderFormatter(row, column) {
        return this.dict.label.is_order[row.isOrder];
      },
      taskFormatter(row, column) {
        return this.dict.label.task_is_end[row.isEndTask];
      },
      jobRunStatusFormatter(jobStatus) {
        return this.dict.label.cycle_job_status[jobStatus];
      },
      getJobDetail(pkId) {
        job.getJobDetailByPkId(pkId)
                .then(res => {
                  this.jobDetailInfo = res;
                  this.jobDetailInfo.jobStatus = this.jobRunStatusFormatter(this.jobDetailInfo.jobStatus)
                })
                .catch(error => {
                  console.log(error);
                });
      },
      getTaskList(){
        let taskParam = {jobCode: this.jobInf.jobCode, bizDate: this.jobInf.bizDate};
        taskApi.getTaskList(taskParam).then(res =>{
          this.taskList = res;
        }).catch(error => {
          console.log(error);
        });
      },
      goMainBack(){
        this.showDetail = false;
        this.goBack();
      },
      handleFilterChange(filters){
        for (var key of Object.keys(filters)) {
          var value = filters[key]
          let taskParam = {jobCode: this.jobInf.jobCode, bizDate: this.jobInf.bizDate};
          if(key&&key=='isOrder'){
            taskParam.isOrder = value[0];
          }else if(key&&key=='isEndTask'){
            taskParam.isEndTask = value[0];
          }else if(key&&key=='taskStatus'){
            taskParam.taskStatus = value[0];
          }else{

          }
          if(!taskParam){
            this.getTaskList();
          }else{
            taskApi.getTaskList(taskParam).then(res =>{
              this.taskList = res;
            }).catch(error => {
              console.log(error);
            });
          }
        }
      },
      onOperInf: function (e) {
        let status = e.target.getAttribute('data-status');
        let previousNode = e.target.previousElementSibling;
        if("off" == status){
          previousNode.setAttribute('class','hex-form-inf-content-show');
          e.target.setAttribute('data-status','on');
        }else {
          previousNode.setAttribute('class','hex-form-inf-content');
          e.target.setAttribute('data-status','off');
        }
      },
    }
  };
</script>
